<template>
	<view>
		<view class="navigation-bar">
			<view @click="turnBack">
				<image src="/static/左箭头.png"></image>
			</view><text>申请提现</text>
		</view>
		<view class="background"></view>
		<view class="form">
			<form class="form" @submit="formSubmit">
				<view class="project1">
					<view>账户余额</view>
					<view>￥1500.00</view>
				</view>
				<view class="project2">
					<view>提现金额</view>
					<input type="text" v-model="withdrawAmount" />
					<text>元</text>
				</view>
				<view class="project3">
					<view>真实姓名</view>
					<input v-model="realName" />
				</view>
				<view class="project4">
					<view>请选择银行</view>
					<picker mode="selector" :range="banks" @change="handleBankChange" :value="selectedBankIndex">
						<view class="picker-text">
							{{ banks[selectedBankIndex] || '请选择' }}
						</view>
					</picker>
					<image src="/static/收起箭头小.png" mode=""></image>
				</view>
				<view class="project5">
					<view>请输入银行卡号</view>
					<input v-model="bankCardNumber" />
				</view>
				<view class="prompt">
					车联网服务平台不会通过任何渠道泄露您的个人信息，请放心填写
				</view>
				<button class="submit" @click="formSubmit">确认信息并提交</button>
			</form>
		</view>
		<view class="body">
			<view>提现记录</view>
			<view class="applyFor">
				<view class="applyFor1">
					<view class="merchant">
						商家提现申请
					</view>
					<view class="money">
						-100:00
					</view>
				</view>
				<view class="applyFor2">
					<view class="time">
						核销时间:2024-12-11<text>11.11</text>
					</view>
					<view class="state">
						审核通过
					</view>
				</view>
			</view>
			<view class="applyFor">
				<view class="applyFor1">
					<view class="merchant">
						商家提现申请
					</view>
					<view class="money">
						-100:00
					</view>
				</view>
				<view class="applyFor2">
					<view class="time">
						核销时间:2024-12-11<text>11.11</text>
					</view>
					<view class="state">
						审核通过
					</view>
				</view>
			</view>
			<view class="applyFor">
				<view class="applyFor1">
					<view class="merchant">
						商家提现申请
					</view>
					<view class="money">
						-100:00
					</view>
				</view>
				<view class="applyFor2">
					<view class="time">
						核销时间:2024-12-11<text>11.11</text>
					</view>
					<view class="state">
						审核通过
					</view>
				</view>
			</view>
		</view>
		<view class="bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banks: ['中国工商银行', '中国农业银行', '中国银行', '中国建设银行', '交通银行'],
				selectedBankIndex: 0,
				withdrawAmount: '',
				realName: '',
				bankCardNumber: ''
			}
		},
		methods: {
			handleBankChange(e) {
				this.selectedBankIndex = e.detail.value;
				console.log('选中的银行是: ', this.banks[this.selectedBankIndex]);
			},
			turnBack() {
				uni.navigateBack({
					url: "/pages/index/index"
				})
			},
			formSubmit() {
				// 提现金额校验
				if (!this.withdrawAmount) {
					uni.showToast({
						title: '请输入提现金额',
						icon: 'none'
					});
					return;
				}
				// 检查提现金额是否为有效的数字
				const withdrawAmount = parseFloat(this.withdrawAmount);
				if (isNaN(withdrawAmount) || withdrawAmount <= 0) {
					uni.showToast({
						title: '提现金额必须为大于 0 的有效数字',
						icon: 'none'
					});
					return;
				}
				// 假设最低提现金额为 1 元，最高提现金额为 10000 元，可根据实际情况修改
				const MIN_WITHDRAW_AMOUNT = 1;
				const MAX_WITHDRAW_AMOUNT = 1500;
				if (withdrawAmount < MIN_WITHDRAW_AMOUNT || withdrawAmount > MAX_WITHDRAW_AMOUNT) {
					uni.showToast({
						title: `提现金额必须在 ${MIN_WITHDRAW_AMOUNT} 元到 ${MAX_WITHDRAW_AMOUNT} 元之间`,
						icon: 'none'
					});
					return;
				}

				// 真实姓名校验
				if (!this.realName) {
					uni.showToast({
						title: '请输入真实姓名',
						icon: 'none'
					});
					return;
				}
				// 检查真实姓名是否只包含中文、字母和空格
				const realNameRegex = /^[\u4e00-\u9fa5a-zA-Z\s]+$/;
				if (!realNameRegex.test(this.realName)) {
					uni.showToast({
						title: '真实姓名只能包含中文、字母和空格',
						icon: 'none'
					});
					return;
				}

				// 银行卡号校验
				if (!this.bankCardNumber) {
					uni.showToast({
						title: '请输入银行卡号',
						icon: 'none'
					});
					return;
				}
				// 检查银行卡号是否为纯数字，且长度在 12 到 19 位之间
				const bankCardRegex = /^\d{12,19}$/;
				if (!bankCardRegex.test(this.bankCardNumber)) {
					uni.showToast({
						title: '银行卡号必须为 12 到 19 位的纯数字',
						icon: 'none'
					});
					return;
				}

				// 所有校验通过，可继续后续操作
				console.log('表单数据校验通过，可提交表单');

				uni.navigateTo({
					url: "/pagesIncomeDetails/pages/withdrawalSuccessful/withdrawalSuccessful"
				})
			}
		}
	}
</script>

<style>
	.navigation-bar {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		background-color: #287BF6;
	}

	.navigation-bar>view>image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}

	.navigation-bar>text {
		color: #FFF;
		margin-right: 40rpx;
		flex-grow: 1;
		text-align: center;
	}

	.background {
		position: absolute;
		background-color: #287BF6;
		width: 100%;
		height: 300rpx;
		z-index: 0;
	}

	.form {
		position: relative;
		margin: 20rpx;
		background-color: #FFF;
		border-radius: 10px;
		font-size: 27rpx;
	}

	.project1 {
		display: flex;
		margin-top: 10rpx;
		margin-bottom: 50rpx;
	}

	.project1>view:nth-child(1) {
		margin-left: 30rpx;
		font-weight: bold;
	}

	.project1>view:nth-child(2) {
		margin-left: 90rpx;
		color: #FF4000;

	}

	.project2 {
		display: flex;
		align-items: center;
		margin: 50rpx 0;
	}

	.project2>view {
		margin-left: 30rpx;
		font-weight: bold;
	}

	.project2>input {
		border: 2px solid #E8E8E8;
		border-radius: 20px;
		width: 200rpx;
		height: 60rpx;
		margin-left: 90rpx;
		padding: 0 25rpx;
	}

	.project2>text {
		margin-left: 10rpx;
		font-weight: bold;
	}

	.project3 {
		display: flex;
		align-items: center;
	}

	.project3>view {
		margin-left: 30rpx;
		font-weight: bold;
	}

	.project3>input {
		border: 2px solid #E8E8E8;
		border-radius: 20px;
		width: 190rpx;
		height: 60rpx;
		margin-left: 90rpx;
		padding: 0 30rpx;
	}

	.project4 {
		display: flex;
		align-items: center;
		margin: 50rpx 0;
	}

	.project4>view {
		margin-left: 30rpx;
		font-weight: bold;
	}

	.picker-text {
		margin-left: 60rpx;
		width: 390rpx;
		height: 60rpx;
		border-radius: 20px;
		border: 2px solid #E8E8E8;
		padding: 0 20rpx;
		line-height: 60rpx;
	}

	.project4>image {
		width: 30rpx;
		height: 20rpx;
		position: relative;
		left: -50rpx
	}

	.project5 {
		display: flex;
		align-items: center;
	}

	.project5>view {
		margin-left: 30rpx;
		font-weight: bold;
	}

	.project5>input {
		border: 2px solid #E8E8E8;
		border-radius: 20px;
		width: 370rpx;
		height: 60rpx;
		margin-left: 10rpx;
		padding: 0 30rpx;
	}

	.prompt {
		font-size: 18rpx;
		padding-top: 10rpx;
		padding-bottom: 30rpx;
		margin: 0 80rpx;
		color: #818181;
	}

	.submit {
		border-radius: 40px;
		width: 600rpx;
		height: 100rpx;
		color: #FFF;
		background-color: #287BF6;
	}

	.body {
		margin: 20rpx;
		border-radius: 20rpx;
		background-color: #FFF;

	}

	.body>view:nth-child(1) {
		border-bottom: 10rpx solid #F7F7F7;
		font-size: 35rpx;
		margin: 0 25rpx;
		padding: 25rpx 0;
		font-weight: bold;
	}

	.applyFor1 {
		display: flex;
		margin: 20rpx;
		justify-content: space-between;
	}

	.merchant {
		font-weight: bold;
		font-size: 27rpx;
	}

	.money {
		color: #FF4000;
	}

	.applyFor2 {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 5rpx solid #F7F7F7;
	}

	.time {
		color: #BCBCBC;
		font-size: 26rpx;
	}

	.state {
		color: #BCBCBC;
		font-size: 26rpx;
	}

	.bottom {
		width: 750rpx;
		height: 80rpx;
	}
</style>